import xID from "./xID.js";
import {replaceByObj} from "./xUtil.js";

const tmplBase = `
<div class="modal" tabindex="-1" style="display:none" id="{{id}}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
        <div class ="modal-control">
          <span class="iFullScreen flat" type ="full-screen" ></span>
          <span class="iClose flat" type="modal-close"></span>
        </div>
      </div>
      <div class="modal-body">
         <div  id ="{{panelId}}" type="panel"></div>
      </div>
      <div class="modal-footer">    
        <button  class="btn btn-primary btn-sm"   type="modal-confirm">
          <span class="iConfirm">确认</span>
        </button>
        <button class="btn btn-secondary btn-sm" type="modal-close">
           <span class="iClose" >退出</span>
        </button>
      </div>
    </div>
  </div>
</div>
` ;

/*
   cfg:
   {
   	binds,
    col: ,
    grid:,
    obj: ,
              	
   }
 * */
export default class xViewModal {

    vRootId = xID.getID();
    vPanelId= xID.getID();
    $root;
    $panel;
    $title;
	// 构造函数
	constructor() {
        $('body').append(replaceByObj(tmplBase,{id:this.vRootId,panelId:this.vPanelId}));
        this.$root = $('#'+this.vRootId);
        this.$panel = $('#'+this.vPanelId);
        this.$title = this.$root.find('.modal-title') ;

        this.$root.on('click','[type ="full-screen"]',this.evFull.bind(this));
        this.$root.on('click','[type="modal-close"]',this.evClose.bind(this));
        this.$root.on('click','[type="modal-confirm"]',this.evConfirm.bind(this));
        this.$root.on('click',this.evOff.bind(this));

	};


	evFull(e){
       let $dialog = this.$root.find('.modal-dialog') ;
       let $span = this.$root.find('[type="full-screen"]');
       if($dialog.hasClass('modal-fullscreen')){
       	   $dialog.removeClass('modal-fullscreen');
           $span.removeClass('iExitFull');
           $span.addClass('iFullScreen');
       }else{
       	   $dialog.addClass('modal-fullscreen');
           $span.addClass('iExitFull');
           $span.removeClass('iFullScreen');
       }

    }

    evClose(e){
	    this.$root.hide();
        if(this.vCfg && this.vCfg.cancle)
            this.vCfg.cancle();
    }

    evConfirm(e){
        this.$root.hide();
        if(this.confirmBefore)
            this.confirmBefore();
        if(this.vCfg && this.vCfg.confirm)
            this.vCfg.confirm();
    }

    evOff(e){
        if(e.target == e.currentTarget)
            this.evClose(null);
    }

    destroy(){
	    this.$root.remove();
    }

}